var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

var Nav = require('../component/nav');

require('./index.css')

var Main = React.createClass({
	getInitialState : function() {
		return {menus:[]};
	},
	componentWillMount : function() {
		$.ajax({url:'/api/menus.json', key:'menus', async:false}).done(function(data){
			this.setState({menus:data});
		}.bind(this));
	},
	render : function() {
		return (
			<div id='box-0'>
				<div id='box-1' className='bg-black'>
					<div id='box-1_1' className='bg-black'>
						<Nav menus={this.state.menus} />
					</div>
					<div id='box-1_2' className='bg-blue'>
					
					</div>
				</div>
				<div id='content'>
				</div>
			</div>
		);
	}
	
});

ReactDOM.render(<Main />, document.getElementById('container'));